<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="./logo.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <title>爱迪智考</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

     /* 加载蒙版样式 */
    #app-loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      font-family: 'Arial', sans-serif;
    }

    .loading-logo-text {
      color: #1a73e8;
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 2rem;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* 科技感加载动画 */
    .tech-loader {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .circuit-board {
      position: absolute;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(90deg, transparent 49%, #1a73e8 49%, #1a73e8 51%, transparent 51%),
        linear-gradient(transparent 49%, #1a73e8 49%, #1a73e8 51%, transparent 51%);
      background-size: 20px 20px;
      opacity: 0.3;
    }

    .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #4285f4;
      border-radius: 50%;
      filter: drop-shadow(0 0 6px rgba(66, 133, 244, 0.8));
      animation: particle-flow 2s infinite ease-in-out;
    }

    .particle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
    .particle:nth-child(2) { top: 80%; left: 30%; animation-delay: 0.4s; }
    .particle:nth-child(3) { top: 20%; left: 70%; animation-delay: 0.8s; }
    .particle:nth-child(4) { top: 60%; left: 80%; animation-delay: 1.2s; }
    .particle:nth-child(5) { top: 30%; left: 40%; animation-delay: 1.6s; }

    @keyframes particle-flow {
      0%, 100% { transform: translate(0, 0); opacity: 0; }
      50% { transform: translate(20px, -20px); opacity: 1; }
    }

    .hexagon {
      position: absolute;
      width: 60px;
      height: 34.64px;
      background-color: #1a73e8;
      margin: 17.32px 0;
      box-shadow: 0 0 15px rgba(26, 115, 232, 0.6);
      animation: pulse 2s infinite ease-in-out;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .hexagon:before,
    .hexagon:after {
      content: "";
      position: absolute;
      width: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
    }

    .hexagon:before {
      bottom: 100%;
      border-bottom: 17.32px solid #1a73e8;
    }

    .hexagon:after {
      top: 100%;
      border-top: 17.32px solid #1a73e8;
    }

    @keyframes pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
      50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    }

    .loading-text {
      color: #5f6368;
      margin-top: 2rem;
      font-size: 1.2rem;
      position: relative;
    }

    .loading-text:after {
      content: "...";
      position: absolute;
      animation: dots 1.5s infinite steps(4, end);
    }

    @keyframes dots {
      0%, 20% { content: "."; }
      40% { content: ".."; }
      60%, 100% { content: "..."; }
    }

    .ai-progress-bar {
      width: 200px;
      height: 4px;
      background: rgba(26, 115, 232, 0.2);
      margin-top: 1rem;
      border-radius: 2px;
      overflow: hidden;
    }

    .ai-progress {
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, #1a73e8, #4285f4);
      animation: progress 2s infinite ease-in-out;
    }

    @keyframes progress {
      0% { width: 0; left: 0; }
      50% { width: 100%; left: 0; }
      100% { width: 0; left: 100%; }
    }
  </style>
</head>

<body>
  <!-- 加载蒙版 -->
  <div id="app-loading">
    <div class="loading-logo-text">爱迪智考</div>

    <div class="tech-loader">
      <div class="circuit-board"></div>
      <div class="hexagon"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
    </div>

    <div class="loading-text">系统正在加载请稍后</div>
    <div class="ai-progress-bar">
      <div class="ai-progress"></div>
    </div>
  </div>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
<script>
    // 当Vue应用加载完成后移除加载蒙版
    window.addEventListener('load', function() {
      setTimeout(function() {
        var loading = document.getElementById('app-loading');
        loading.style.opacity = '0';
        loading.style.transition = 'opacity 0.5s ease';
        
        setTimeout(function() {
          loading.style.display = 'none';
        }, 500);
      }, 1000); // 确保至少显示1秒
    });
  </script>
</html>